import React, {Component} from 'react';
import {View, Text} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import SvgUri from 'react-native-svg-uri';
import {
  group,
  activegroup,
  friend,
  activefriend,
  message,
  activemessage,
  mine,
  activemine,
  man,
} from './res/fonts/svg';
import Friend from './pages/friend/home';
import Group from './pages/group/home';
import Message from './pages/message/home';
import My from './pages/my/home';
import request from './utils/request';
import {MY_INFO} from './utils/pathMap';
import {inject, observer} from 'mobx-react';
@inject('UserStore')
@observer
class Index extends Component {
  async componentDidMount() {
    const res = await request.privateGet(MY_INFO);
    console.log('个人数据' + res);
    this.props.UserStore.setUser(res.data);
  }
  state = {
    selectedTab: 'friend',
    pages: [
      {
        selected: 'friend',
        title: '交友',
        renderIcon: () => <SvgUri svgXmlData={friend} width="20" height="20" />,
        renderSelectedIcon: () => (
          <SvgUri svgXmlData={activefriend} width="20" height="20" />
        ),
        onPress: () =>
          this.setState({
            selectedTab: 'friend',
          }),
        component: <Friend />,
      },
      {
        selected: 'group',
        title: '圈子',
        renderIcon: () => <SvgUri svgXmlData={group} width="20" height="20" />,
        renderSelectedIcon: () => (
          <SvgUri svgXmlData={activegroup} width="20" height="20" />
        ),
        onPress: () =>
          this.setState({
            selectedTab: 'group',
          }),
        component: <Group />,
      },
      {
        selected: 'message',
        title: '消息',
        renderIcon: () => (
          <SvgUri svgXmlData={message} width="20" height="20" />
        ),
        renderSelectedIcon: () => (
          <SvgUri svgXmlData={activemessage} width="20" height="20" />
        ),
        onPress: () =>
          this.setState({
            selectedTab: 'message',
          }),
        component: <Message />,
      },
      {
        selected: 'my',
        title: '我的',
        renderIcon: () => <SvgUri svgXmlData={mine} width="20" height="20" />,
        renderSelectedIcon: () => (
          <SvgUri svgXmlData={activemine} width="20" height="20" />
        ),
        onPress: () =>
          this.setState({
            selectedTab: 'my',
          }),
        component: <My />,
      },
    ],
  };
  render() {
    const {selectedTab, pages} = this.state;
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: '#fff',
        }}>
        <TabNavigator>
          {pages.map((v, i) => (
            <TabNavigator.Item
              key={i}
              selected={selectedTab === v.selected}
              title={v.title}
              renderIcon={v.renderIcon}
              renderSelectedIcon={v.renderSelectedIcon}
              onPress={v.onPress}
              selectedTitleStyle={{
                color: '#d4237a',
              }}
              tabStyle={{
                backgroundColor: '#ccc',
                justifyContent: 'center',
              }}>
              {v.component}
            </TabNavigator.Item>
          ))}
        </TabNavigator>
      </View>
    );
  }
}
export default Index;
